<template>
  <div class="page">
    <mt-datetime-picker
      ref="picker"
      type="date"
      :startDate="startDate"
      :endDate="endDate"
      v-model="curr"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
    ></mt-datetime-picker>
    <storeDetails ref="store" :reqParams="reqParams" />
    <div class="scroll-view">
      <customHeader middleTitle="结算状态查询" @leftCallBack="goBack"></customHeader>
      <div class="page-body" v-if="list">
        <div class="date-text" @click="openPicker">
          <i class="zhk-activity_rl"></i>
          {{moment(date).format('YYYY-MM-DD')}}
        </div>
        <no-data msg="暂无数据" v-show="!list.length"></no-data>
        <ul class="status-list" v-show="list.length">
          <li v-for="(item,index) in list" :key="index">
            <div class="list-cell">
              <!-- <span class="list-cell_title">结算金额：¥ {{item.settleAmount2Yuan}}</span> -->
              <span class="list-cell_title">结算金额：¥ {{item.settleStatus!=-2 ? item.settleAmount2Yuan : '--'}}</span>
              <div
                :class="settleStatusFormate(item.settleStatus).c"
              >{{settleStatusFormate(item.settleStatus).v}}</div>
            </div>
            <div class="orange" v-if="item.settleStatus==-1">失败原因：{{item.remark}}</div>
            <div>银行卡号：{{item.settleAccountNo||'--'}}</div>
            <div>商户号：{{item.merchantId||'--'}}</div>
            <div class="list-cell" @click="showStore(item.merchantId)" v-if="item.shopCount && item.shopCount>1">
              <span class="list-cell_title">关联门店：{{item.shopCount}}家门店</span>
              <div>
                <i class="zhk-list_rarrow"></i>
              </div>
            </div>
            <div class="list-cell"  v-else>
              <span class="list-cell_title">关联门店：{{item.shopName}}</span>
              <div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import customHeader from "../../../components/header/header";
import noData from "../../../components/noData/noData";
import storeDetails from "../../../components/StoreChoice/StoreDetails";
import moment from "moment";
import jsBridge from "../../../tools/jsBridge.js";

export default {
  components: {
    customHeader,
    noData,
    storeDetails,
  },
  data() {
    return {
      moment: moment,
      reqParams: {},
      curr: new Date(),
      list: [11],
      date: new Date(),
    }
  },
  methods: {
    goBack() {
      if (this.$refs.store.popupVisible) {
        this.$refs.store.popupVisible = false;
      } else {
        if (String(this.$route.query.close) == 'true') {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    settleStatusFormate(status) {
      // FAIL(-1, "失败"),
      // PROCESSING(0, "打款中"),
      // SUCCESS(1, "成功"),
      // CANCEL(2, "取消/退票"),
      // FREEZE(3, "冻结"),
      // INIT(4, "初始化/已划款"),
      // TURN(5, "转入小宝金库");
      let v = "";
      let c = "";
      if (status == -1) {
        v = "划款失败";
        c = "red";
      } else if (status == 0) {
        v = "划款中";
        c = "blue";
      } else if (status == 1) {
        v = "划款成功";
      } else if (status == 2) {
        v = "划款取消";
        c = "red";
      } else if (status == 3) {
        v = "冻结出款";
        c = "red";
      } else if (status == 4) {
        v = "划款中";
        c = "blue";
      } else if(status == -2) {
        v = "当前商户号不支持查询";
        c = "gray";
      }
      return { v: v, c: c };
    },
    handleConfirm(val) {
      this.date = val;
      this.getList();
    },
    showStore(merchantId) {
      this.reqParams = { url: "/newapp/order/getCityShopListByMerchantId.do?merchantId="+merchantId, type: "get", data: null };
      this.$refs.store.popupShow();
    },
    getList() {
      this.ajax({
        url: `/newapp/order/getOrderPaidStatus.do?dayTime=${this.date.getTime()}`,
        type: "get",
      }).then(res => {
        if (res.success) {
          this.list = res.resultObject;
        } else {
          Toast(res.msg);
        }
      }).catch(err => {

      });
    },
    openPicker() {
      this.$refs.picker.open();
    },
  },
  computed: {
    startDate() {
      return moment().subtract('days', 30).toDate();
      // return moment().day(-30).toDate();
    },
    endDate() {
      return new Date();
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/public";
.date-text {
  @include remCalc(font-size, 32);
  @include remCalc(padding, 20, 30);
  > i {
    @include remCalc(margin-right, 10);
  }
}
.status-list {
  li {
    color: #333;
    background-color: #fff;
    @include remCalc(font-size, 32);
    @include remCalc(margin-bottom, 30);
    @include remCalc(padding, 10, 30);
    > div {
      @include remCalc(padding, 16, 0);
    }
  }
  .list-cell {
    display: flex;
    align-items: center;
    @include remCalc(margin-bottom, 10);
    &_title {
      @include remCalc(margin-right, 20);
    }
    > div {
      text-align: right;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    &:nth-of-type(1) {
      @include remCalc(margin, 0, -30, 10);
      @include remCalc(padding, 10, 30, 20);
      @include thin-border(false, false, bottom);
    }
  }
  .red {
    color: #ff0000;
  }
  .blue {
    color: #0099ff;
  }
  .orange {
    color: #ff6600;
  }
  .gray {
    color: #999;
  }
}
</style>